<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加</title>
    <#assign base=request.contextPath  />
    <base id="base" href="${base}">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${base}/static/win10/component/layui/css/layui.css" media="all">
    <script src="${base}/static/win10/js/jquery-1.8.3.min.js?t=1"></script>
    <link rel="stylesheet" href="${base}/static/win10/css/ztree/metroStyle/metroStyle.css" type="text/css">
    <link rel="stylesheet" href="${base}/static/win10/css/ztree/demo.css?t=2" type="text/css">
    <script type="text/javascript" src="${base}/static/win10/js/jquery.ztree.all.js"></script>
    <script>
        var base =  "${base}";
    </script>
</head>
<body>
<br>
<form class="layui-form " action="">
          <div class="layui-form-item">
              <label class="layui-form-label">角色名</label>
              <div class="layui-input-block">
                  <input type="text" id="roleName" name="roleName"   autocomplete="off" placeholder="请输入角色名"
                         class="layui-input">
              </div>
          </div>


          <div class="layui-form-item">
              <label class="layui-form-label">角色描述</label>
              <div class="layui-input-block">
                  <input type="text" id="details" name="details"   autocomplete="off" placeholder="请输入角色描述"
                         class="layui-input">
              </div>
          </div>
    <div class="layui-form-item">
        <label class="layui-form-label">菜单权限</label>
        <div class="layui-input-block">
            <ul id="tree" class="ztree" style="height: 500px;width: 98%"></ul>
        </div>
    </div>


    <div align="center">
        <button type="button" class="layui-btn" id="submit">保存</button>
    </div>
</form>

<script src="${base}/static/win10/component/layui/layui.js?t=1"></script>

<script>
    layui.use(['form', 'layer'], function() {
        var form = layui.form
                , layer = layui.layer;


        var treeObj;
        var setting = {
            async: {
                enable: true,
                url: base + "/star/role/admin/finPermissionAjax",
                dataFilter: ajaxDataFilter
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pId",
                    rootPId: 0
                }
            },
            view: {
                expandSpeed: "normal"
            },
            check: {
                enable: true,
                chkStyle: "checkbox",
                radioType: "all"
            }
        };
        initTree();
        function initTree() {
            treeObj =  $.fn.zTree.init($("#tree"), setting  );
        }

        /**
         * 解析 正常响应的数据
         * @param treeId
         * @param parentNode
         * @param responseData
         * @returns {*}
         */
        function ajaxDataFilter(treeId, parentNode, responseData) {
            if(responseData.code===200){
                return responseData.data;
            }else{
                layer.msg(responseData.msg)
            }
        }




        $("#submit").on("click",function () {
            if(check()===false){
                return;
            }

            var formDate = {
                         roleName:$("#roleName").val(),
                         details:$("#details").val(),
                           permissionIds:getTreeDataId()
            }
            $.ajax({
                type: "POST",
                url: base+"/star/role/admin/addRole",
                data: formDate,
                success: function (data) {
                    layer.msg(data.msg)
                    if (data.code === 200) {
                        window.location.href=base+"/star/role/admin/main.html"
                    } else {

                    }
                }
            });
        })




//获取ztree选中点id
        function getTreeDataId() {
            var nodes=treeObj.getCheckedNodes(true);
            var dataR="";
            for(var i=0;i<nodes.length;i++){
                dataR+=","+nodes[i].id; //获取选中节点的值
            }
            return dataR.substr(1,dataR.length-1);
        }



        function check(){

                   if($("#roleName").val().length<1){
                       layer.msg("请输入角色名");
                       return false;
                   }
                   if($("#details").val().length<1){
                       layer.msg("请输入角色描述");
                       return false;
                   }
                   if(getTreeDataId().length<1){
                       layer.msg("请选择角色拥有的权限");
                       return false;
                   }
        }
    });

</script>
</body>
</html>